import React from "react";
import { EditorMode, IToolbarService } from "../types";
import { useInversify } from "../providers/InversifyProvider";

interface ToolbarProps {
    mode: EditorMode;
    onModeChange: (newMode: EditorMode) => void;
}

const Toolbar: React.FC<ToolbarProps> = ({ mode, onModeChange }) => {
    const container = useInversify();
    const toolbarService = container.get<IToolbarService>("IToolbarService");
    const items = toolbarService.getToolbarItems(mode);

    return (
        <div className="toolbar">
            {items.map((item) => (
                <button key={item.id} className="toolbar-item" onClick={item.action}>
                    {item.label}
                </button>
            ))}
            <button className="toolbar-item" onClick={() => onModeChange("2d")}>
                2D编辑器
            </button>
            <button className="toolbar-item" onClick={() => onModeChange("interactive")}>
                交互编辑器
            </button>
            <button className="toolbar-item" onClick={() => onModeChange("preview")}>
                预览
            </button>
        </div>
    );
};

export default Toolbar;
